
<template>
    <router-view></router-view>
</template>
<script>
import * as echarts from 'echarts';
export default {
    async mounted() {
        // 初始化echarts实例
        var myChart = echarts.init(this.$refs.container);

        // 柱状图的颜色数组
        var colors = [
            'rgb(55, 162, 218)',
            'rgb(50, 197, 233)',
            'rgb(103, 224, 227)',
            'rgb(255, 219, 92)',
            'rgb(255, 219, 92)',
        ];


        // 柱状图的数据
        var data = [];

        // Y轴的坐标轴类目名称
        var categories = [];

        //打开加载动画

        myChart.showLoading()

        //发起异步请求，获取数据


        let res = await new Promise(resolve => {
            fetch('http://chst.vip:8081/data/rate.json')
                .then(body => body.json())
                .then(res => {
                    setTimeout(() => {
                        resolve(res)
                    }, 500)
                })
        })

        //处理数据

        data = res.data.map(item => {
            categories.push(item.name)
            return item.rate
        })


        // 设置柱状图的配置项和数据
        var option = {
            grid: {
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            legend: {},
            xAxis: {
                type: 'value',
                show: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: categories,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true
                }
            },
            series: [{
                name: '学习进度',
                label: {
                    show: true,
                    position: 'inside',
                    color: '#333',
                    formatter: "{b}:进度:{c}%",
                    textStyle: {
                        color: '#fff'
                    }
                },
                type: 'bar',
                data: data,
                barWidth: '60%',
                onclick: (param) => {
                    console.log(param)
                },
                itemStyle: {
                    color: function (params) {
                        return colors[params.dataIndex];
                    },
                    emphasis: {
                        borderColor: '#000',
                        borderWidth: 2,
                        borderRadius: 5
                    },
                    barBorderRadius: 5
                }
            }]
        };

        // 使用配置项和数据显示图表
        myChart.setOption(option);

        //关闭加载动画

        myChart.hideLoading()

        // myChart.on('mouseover',(params)=>{
        //     console.log(params)
        // })

        //让ecahrts图表在窗口大小发生改变的时候适应页面
        window.addEventListener('resize', () => {
            myChart.resize()
        })
    }
}
</script>
<!-- <style>
.container {
    height: 300px;
}
</style> -->
